<template>
  <div class="foamMain">
    <div class="foamBody">
      <!-- 状态栏 -->
      <div
        v-bind:style="{
          backgroundColor: statusBarColor,
          height: statusBarHeight + 'px',
        }"
      ></div>
      <!-- 标题栏 -->
      <div class="foamHead">
        <img
          @click="goBackPage"
          src="../assets/img/light/public/ic_back.png"
          class="foamBarLeft"
        />
        <div class="foamBarTitle">发泡剂</div>
        <!-- <img class="foamBarRight" src="../assets/img/more.png" @click="goBack" /> -->
      </div>
      <!-- 耗材余量 -->

      <div class="foamProgress">
        <div class="foamProgressContainer">
          <canvas class="progress" id="myCanvas" width="252" height="252">
          </canvas>
        </div>
        <div class="leftContainer">
          <div class="title" id="myPercent">30</div>
          <div class="unit">%</div>
        </div>
        <div class="desc">剩余</div>
        <div class="name">发泡剂</div>
        <div class="canUseDays">预计可使用{{ canUseDays }}天</div>
      </div>

      <div class="foamCard">
        <div class="title">
          当发泡剂耗尽后，马桶自洁能力会大幅度下降，请及时更换发泡剂
        </div>
      </div>
      <div class="foamBtnContainer">
        <div class="resetBtn" @click="clickReset">
          <div class="title">复位</div>
        </div>
        <div class="divider"></div>
        <div class="buyBtn" @click="clickBuy">
          <div class="title">点击购买</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "../assets/css/animfoam.css";
import "../assets/less/index.less";
import {
  refreshWebView,
  modifyTitleBar,
  setChangeTitleStyle,
  overrideTitleBarRightBtn,
  setgoSettingListener,
  setMessageVisible,
  getStatusBarHeight,
  setStatuBarHeightListener,
  sendProperty,
  setPropertiesListener,
  setNavigationVisible,
  getDevCacheAll,
  getProperty,
  toast,
  debugLog,
  userLog,
  getDarkMode,
} from "../assets/js/device.js";
import { useProgress } from "../assets/js/circleProgress.js";
export default {
  name: "Setting",
  data() {
    //页面状态栏高度监听器
    setStatuBarHeightListener(this.updateStatusBarHeight);
    //状态栏高度
    getStatusBarHeight();
    //设置标题栏可见性
    setNavigationVisible(false);
    //

    return {
      detailInfo: [],
      // msg: this.$route.query.editType, //上个页面传递来的参数,
      statusBarColor: "orange",
      statusBarHeight: 24,

      canUseDays: 15,
      percent: 30,
    };
  },
  mounted() {
    useProgress(1, 100, this.percent);
  },
  methods: {
    //更新页面状态栏高度
    updateStatusBarHeight: function (height) {
      this.statusBarHeight = height;
      // toast("3000", "height = " + height);
    },
    //router返回上一个页面
    goBackPage: function () {
      this.$router.go(-1);
    },
    //购买按钮
    clickBuy: function () {
      useProgress(1, 100, this.percent);
      toast("1000", "购买");
    },
    //复位按钮
    clickReset: function () {
      useProgress(2, this.percent, 100);
      toast("1000", "复位");
    },
  },
};
</script>

<style scoped>
</style>
